<template>
	<view class="">
		<view class="info-con">
			<u-form :model="finkerFrom" ref="uForm" label-width="200" label-position="left">
				<u-form-item prop="content" :borderBottom="false">
					<!-- <view class="mian-con"> -->
					<textarea class="textarea" v-model="finkerFrom.content" placeholder="请描述您遇到的问题~" />
					<!-- </view> -->
				</u-form-item>
				<u-form-item prop="img" :borderBottom="false"><mix-upload-image :count="3" :length="3" ref="mixUploadImage"></mix-upload-image></u-form-item>
			</u-form>
		</view>

		<view class="footer-btn" hover-class="btn-hover" @tap="subfilker">提 交</view>
		<mix-modal ref="mixModal" text="提交成功" @onConfirm="back"></mix-modal>
	</view>
</template>

<script>
import mixModal from '@/components/mix-modal/mix-modal.vue';
import mixUploadImage from '@/components/mix-upload-image/mix-upload-image.vue';
export default {
	components: {
		mixModal,
		mixUploadImage
	},
	data() {
		return {
			finkerFrom: {
				content: '',
				img: []
			},
			rules: {
				content: [
					{
						required: true,
						message: '请输入相关内容'
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		subfilker() {
			let imgs = this.$refs.mixUploadImage.imageList.map(item => {
				item.url;
			});
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$util.throttle(async () => {
						const data = {
							uid: uni.getStorageSync('uid'),
							content: this.finkerFrom.content,
							pic: imgs.join('|')
						};
						const res = await this.$request('content/opinion', data, { showLoading: true });
						if (res.result == 0) {
							this.$refs.mixModal.open();
						} else {
							this.$util.msg(res.msg);
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped>
.info-con {
	padding: 20upx;
	background: #f6f6f6;
	width: 710upx;
	margin:30upx auto 0;
}
.info {
	color: #333333;
	font-size: 24upx;
}

.img {
	width: 67upx;
	height: 67upx;
}

.mian-con {
	background-color: #ffffff;
	height: 368upx;
	padding: 20upx;
}

.footer-btn {
	width: 90%;
	height: 88upx;
	margin: 100upx auto;
	font-size: 34upx;
	border-radius: 44upx;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	line-height: 88upx;
	background: #2781a7;
}
.textarea {
	width: 100%;
	height:220upx;
	font-size: 26upx;
	color: #333333;
}
</style>
